<template>
    <div class="detail"  ref="detail" >
        <banner :bannerInfo="{bannerImg:detailData.bannerImg, sightName: detailData.sightName ,gallaryImgs: detailData.gallaryImgs}"></banner>
        <detail-header></detail-header>
        <detail-list :list="detailData.categoryList"></detail-list>
        
        <div class="container">
          {{top}}
        </div>
    </div>
</template>

<script>
  import { reqDetailList } from '../../ajax'
  
  import Banner from './components/Banner'
  import DetailHeader from './components/Header'
  import DetailList from './components/List'

  
  
  // detail的 头部组件
  export default {
    name: 'Detail',
    components: {
      Banner,
      DetailHeader,
      DetailList,

    },
    data () {
      return {
        detailData: {},
        top: 0,
      }
    },
    methods: {
      // ajax请求详情json
      async getDetailList () {
        // ajax请求json 城市列表 和 热门城市
        let {data} = await reqDetailList({id: this.$route.params.id})
        data = data.data
        console.log(data)
        // 将请求回来的数据保存到data状态中
        this.detailData = data
        
      },
    },
    mounted () {
      this.getDetailList()
   
    },
    
  }
</script>

<style scoped lang="stylus">
    .container {
        height: 2000px;
        
    }
</style>